<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">实名认证</view>
		</view>
		<view class="bg_box">
			<image class="bg01" src="/static/bg10.png" mode="widthFix"></image>
			<view class="bg_content">

				<view class="details_box">
					<view class="standing" @tap="chooseImg01">
						<image :src="cardImg01" mode="widthFix"></image>
						<view class="text">请上传身份证人像面</view>
					</view>

					<view class="standing" @tap="chooseImg02">
						<image :src="cardImg01" mode="widthFix"></image>
						<view class="text">请上传身份证国徽面</view>
					</view>
				</view>

				<view class="details_box">
					<view class="details_title">请完善您的个人资料</view>
					<view class="list">
						<view class="name">真实姓名</view>
						<input type="text" v-model="truename" placeholder="请输入真实姓名" />
					</view>
					<view class="list">
						<view class="name">身份证号</view>
						<input type="text" v-model="idcode" placeholder="请输入本人身份证号" />
					</view>
				</view>
				<view class="clear_box04"></view>
				<view v-if="is_sm == 0" class="confirm sub" @click="to_submit()">认证</view>
				<view v-else class="confirm">已认证</view>

			</view>
		</view>

	</view>
</template>

<script>
	import helper from '@/common/helper.js';
	import tools from '@/common/image-tools.js';
	export default {
		data() {
			return {
				scrrol: false,
				cardname: '',
				truename: '',
				idcode: '',
				cardtel: '',
				cardcode: '',
				countdown: '获取验证码',
				change1: 0,
				change2: 0,
				cardImg01: '/static/card01.png',
				cardImg02: '/static/card02.png',
				end: 0,
				is_sm: 0,

			};
		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;

			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				let url = this.site_url + 'api/auth/member/getInfo';
				this.areq(url).then(res => {
					if (res.code == 1) {
						let ret = res.data;
						this.is_sm = ret.is_sm;
						this.idcode = ret.idcode;
						this.truename = ret.truename;
						// this.cardtel = ret.cardtel;
						// this.cardname = ret.cardname;
						if (ret.idcode_z) {
							this.cardImg01 = this.realUrl(ret.idcode_z);
						}
						if (ret.idcode_f) {
							this.cardImg02 = this.realUrl(ret.idcode_f);
						}

					}


				})
			},
			to_submit() {
				if (this.end) {
					this.showMsg('请勿重复提交');
					return;
				}
				// if (!this.cardname) {
				// 	this.showMsg('请输入银行名称');
				// 	return;
				// }
				if (!this.idcode) {
					this.showMsg('请输入身份证号码');
					return;
				}
				if (this.truename == '') {
					this.showMsg('请输入预留名称');
					return;
				}
				if (this.cardtel == '') {
					this.showMsg('请输入预留手机号');
					return;
				}
				// if(this.cardcode == ''){
				// 	this.showMsg('请输入银行卡号');
				// 	return;
				// }

				// if(!helper.check_mobile(this.cardtel)){
				// 	this.showMsg('手机号格式错误');
				// 	return;
				// }
				if (this.cardImg01 == '/static/card01.png' || this.change1 == 0) {
					this.showMsg('请点击上传身份证正面');
					return;
				}
				if (this.cardImg02 == '/static/card02.png' || this.change2 == 0) {
					this.showMsg('请点击上传身份证反面');
					return;
				}
				uni.$u.throttle(this.real_submit, 2000);
			},
			async real_submit() {
				uni.showLoading({
					title: '请稍后..'
				});
				helper.Timer.start();
				let url = this.site_url + 'api/auth/member/auth_handle';
				let param = {
					// cardname : this.cardname,
					// cardtel : this.cardtel,
					truename: this.truename,
					idcode: this.idcode,
					// cardcode : this.cardcode,
					idcode_z: '',
					idcode_f: ''
				};

				let img1 = await tools.pathToBase64(this.cardImg01);
				let img2 = await tools.pathToBase64(this.cardImg02);
				param.idcode_z = img1;
				param.idcode_f = img2;

				this.areq(url, param, 'POST').then(res => {
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(() => {
						uni.hideLoading();
						if (res.code == 1) {
							this.showMsg('恭喜提交成功');
							this.end = 1;
							this.$emit('auto_update');
							setTimeout(() => {
								this.backTo();
							}, 1200)
						} else {
							this.showMsg(res.msg, 2500);
						}
					}, left_time)
				});

			},
			chooseImg01(e) {
				if (this.is_sm) {
					return false;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//console.log(JSON.stringify(res.tempFilePaths[0]));
						this.change1 = 1;
						this.cardImg01 = res.tempFilePaths[0];

					}
				});

			},
			chooseImg02(e) {
				if (this.is_sm) {
					return false;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.change2 = 1;
						this.cardImg02 = res.tempFilePaths[0];
					}
				});
			},


		}
	};
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #FFE6D0 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(25vh + var(--status-bar-height));
		z-index: 98;
	}

	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}

	.details_boxNo {
		padding: 0vw 4%;
	}

	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.details_box .input_box {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}

	.details_box .input_box .m {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}

	.details_box .input_box input {
		font-size: 7vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}

	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}

	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}

	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.details_box .list .text .i {
		width: 5vw;
		margin-right: 1vw;
	}

	.details_box .list .text .i image {
		width: 100%;
	}

	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
		font-weight: bold;
	}

	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}

	.standing {
		width: 100%;
	}

	.standing image {
		width: 100%;
	}

	.standing .text {
		width: 100%;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-top: 3vw;
		text-align: center;
	}

	.details_box .standing:nth-child(2) {
		margin-top: 5vw;
	}
</style>